<template>
	<view class="container">
	  <!-- 页面标题 -->
	  <view class="header">
		<view class="title-box">
		  <text class="title">今日热门新闻</text>
		  <text class="subtitle">根据市场影响力实时排序</text>
		</view>
	  </view>
  
	  <!-- 新闻列表 -->
	  <view v-if="loading" class="loading">
		<uni-load-more status="loading" />
	  </view>
	  <view v-else class="news-list">
		<view 
		  class="news-item"
		  v-for="news in filteredNews"
		  :key="news.id"
		  @tap="handleNewsClick(news.id)"
		>
		  <!-- 新闻内容 -->
		  <view class="news-content">
			<!-- 标题 -->
			<text class="news-title">{{ news.title }}</text>
			
			<!-- 元信息：时间和标签 -->
			<view class="meta-info">
			  <view class="time">
				<text class="iconfont icon-time"></text>
				<text>{{ formatTime(news.time) }}</text>
			  </view>
			  
			  <view class="tag-list">
				<text 
					v-for="(tag, index) in news.relatedConcepts" 
					:key="index"
					class="tag"
				  >{{ tag }}</text>
				</view>
			</view>
		  </view>
  
		  <!-- 箭头 -->
		  <text class="iconfont icon-right"></text>
		</view>
	  </view>
	</view>
  </template>
  
  <script>
  export default {
	data() {
	  return {
		loading: false,
		sectors: [],
		hotNews: [],
		page: 1,
		loadMoreStatus: 'more'
	  }
	},
	
	onLoad() {
	  this.getNewsList()
	},
	
	computed: {
	  filteredNews() {
		return this.hotNews
	  }
	},
	
	methods: {
	  async getNewsList() {
		console.log('================ 获取新闻列表 ================')
		try {
		  this.loading = true
		  console.log('准备调用云函数...')
		  
		  const res = await uniCloud.callFunction({
			name: 'news',
			data: {
			  action: 'getNewsList'
			}
		  })
		  
		  console.log('云函数返回结果:', res)
		  
		  if(res.result.code === 200) {
			console.log('获取成功,数据:', res.result.data)
			this.sectors = res.result.data.sectors
			this.hotNews = res.result.data.list
		  } else {
			console.error('获取失败:', res.result.msg)
			uni.showToast({
			  title: res.result.msg,
			  icon: 'none'
			})
		  }
		  
		} catch(e) {
		  console.error('获取新闻列表异常:', e)
		  uni.showToast({
			title: '获取数据失败',
			icon: 'none'
		  })
		} finally {
		  this.loading = false
		  console.log('==========================================')
		}
	  },
	  
	  handleNewsClick(newsId) {
		uni.navigateTo({
		  url: `/pages/news/detail?id=${newsId}`
		})
	  },
	  
	  async onPulldownRefresh() {
		this.page = 1
		await this.getNewsList()
		this.$refs.uniPulldownRefresh.endPulldownRefresh()
	  },
	  
	  async onReachBottom() {
		if (this.loadMoreStatus === 'noMore') return
		
		this.loadMoreStatus = 'loading'
		this.page++
		
		try {
		  const res = await uniCloud.callFunction({
			name: 'news',
			data: {
			  action: 'getNewsList',
			  params: {
				page: this.page,
				pageSize: 10
			  }
			}
		  })
		  
		  if (res.result.code === 200) {
			const newList = res.result.data.list
			if (newList.length < 10) {
			  this.loadMoreStatus = 'noMore'
			} else {
			  this.loadMoreStatus = 'more'
			}
			this.hotNews.push(...newList)
		  }
		} catch (e) {
		  console.error(e)
		  this.loadMoreStatus = 'more'
		}
	  },
	  
	  formatTime(timestamp) {
		if (!timestamp) return ''
		const date = new Date(timestamp)
		const year = date.getFullYear()
		const month = String(date.getMonth() + 1).padStart(2, '0')
		const day = String(date.getDate()).padStart(2, '0')
		const hours = String(date.getHours()).padStart(2, '0')
		const minutes = String(date.getMinutes()).padStart(2, '0')
		return `${year}-${month}-${day} ${hours}:${minutes}`
	  }
	}
  }
  </script>
  
  <style lang="scss">
  .container {
	padding: 20rpx;
	background: #f5f5f5;
	min-height: 100vh;
  }
  
  .header {
	margin-bottom: 20rpx;
	padding: 0 10rpx;
	
	.title-box {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  text-align: center;
	  margin-bottom: 20rpx;
	  
	  .title {
		font-size: 40rpx;
		font-weight: bold;
		background: linear-gradient(45deg, #1890ff, #40a9ff);
		-webkit-background-clip: text;
		color: transparent;
	  }
	  
	  .subtitle {
		font-size: 24rpx;
		color: #8c8c8c;
		margin-top: 10rpx;
	  }
	}
  }
  
  .news-list {
	.news-item {
	  display: flex;
	  align-items: flex;
	  padding: 20rpx;
	  margin-bottom: 20rpx;
	  background: #fff;
	  border-radius: 16rpx;
	  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
	  transition: all 0.3s;
	  
	  &:active {
		transform: scale(0.98);
		background: #fafafa;
	  }
	  
	  .news-content {
		flex: 1;
		margin-right: 8rpx;
		
		.news-title {
		  font-size: 32rpx;
		  font-weight: 600;
		  color: #333;
		  line-height: 1.4;
		  margin-bottom: 12rpx;
		  display: -webkit-box;
		  -webkit-box-orient: vertical;
		  -webkit-line-clamp: 2;
		  overflow: hidden;
		}
		
		.meta-info {
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		  
		  .time {
			font-size: 24rpx;
			color: #999;
			display: flex;
			align-items: center;
			gap: 4rpx;
			
			.iconfont {
			  font-size: 24rpx;
			}
		  }
		  
		  .tag-list {
			display: flex;
			flex-wrap: wrap;
			gap: 8rpx;
			
			.tag {
			  padding: 4rpx 12rpx;
			  border-radius: 100rpx;
			  font-size: 24rpx;
			  background: rgba(24, 144, 255, 0.1);
			  color: #1890ff;
			  font-weight: 500;
			}
		  }
		}
	  }
	  
	  .iconfont.icon-right {
		color: #ccc;
		font-size: 32rpx;
		margin-top: 8rpx;
		transition: transform 0.3s;
	  }
	  
	  &:active .iconfont.icon-right {
		transform: translateX(4rpx);
	  }
	}
  }
  
  .loading {
	padding: 30rpx 0;
	display: flex;
	justify-content: center;
	
	:deep(.uni-load-more__img) {
	  width: 40rpx;
	  height: 40rpx;
	}
  }
  </style>